<div fxFlexFill fxLayout="row" class="detail-content">
  <aside fxFlex="15%" fxLayout="column" class="turbine-detail">
    <div class="bg detail-flex detail-column">
      <div class="turbine-detail-farm" [ngStyle]="{background:this.currentStatus?.statusColor}">

        <div class="title" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave($event)">
          <span class="farmName">
            <i *ngIf="currentDevice?.turBenchMark"></i>{{currentDevice?.farmName}}{{currentDevice?.deviceName}}</span>

          <em [ngClass]="currentTurbSub?.operCategoryIcon">&nbsp;{{currentTurbSub?.operCategoryName}}</em>

          <div class="turbine-selector-show" [hidden]="!showSelector">

            <app-device-selector 
              [selectedDeviceId]="selectedDeviceId" 
              [selectedFarmId]="selectedFarmId" 
              [display]="true"
              [farmCategory]="farmCategory" 
              [deviceCategories]="deviceCategories"
              [multipleDevice]="false" 
              (selectedDevicesChange)="onSelectFarmRadio($event)">
            </app-device-selector>
          </div>
        </div>

        <div class="turbine-title-model">
          <app-farm-model class="turbine-model" [hideSun]="true">
          </app-farm-model>
          <span>{{currentStatus?.statusName}}</span>
        </div>
      </div>
      <div class="turbine-detail-formInfo turbine-statu detail-flex-full">
        <p>机组型号
          <span>{{turbineModel?.modelName}}</span>
        </p>
        <p>厂家
          <span>{{turbineModel?.factoryName}}</span>
        </p>
        <p *ngFor="let item of modelParams">
          {{item.modelParamName}}{{item.unit?'('+item.unit+')':item.unit}}
          <span>{{item.paramValue?item.paramValue:0}}</span>
        </p>

      </div>
    </div>
  </aside>
  <section fxFlex="85%" class="detail-main">
    <div fxFlexFill class="detail-flex detail-column">
      <header class="detail-main-header" align="center">
        <span class="detail-header-image">
          <img src="{{localhostPath}}/assets/images/turbine.png">
          <b (mouseenter)="onMouseToopEnter(6)" (mouseleave)="onMouseToopLeave(6)">
            <span class="first-line" *ngIf="isShowVariable">
              <span class="two-line">
                <div class="system-content detail-flex detail-column ">
                  <app-turbine-detail-tooltip [switchingValue1]='switchingValue1' [switchingValue2]='switchingValue2' fxFlexFill [data]="variable"
                    [icon]="variableIcon" [title]="variableTitle">
                  </app-turbine-detail-tooltip>
                </div>
              </span>
            </span>
          </b>
          <b (mouseenter)="onMouseToopEnter(4)" (mouseleave)="onMouseToopLeave(4)">
            <span class="first-line" *ngIf="isShowYaw">
              <div class="system-content detail-flex detail-column ">
                <app-turbine-detail-tooltip [switchingValue1]='switchingValue1' [switchingValue2]='switchingValue2' fxFlexFill [data]="yaw"
                  [icon]="yawIcon" [title]="yawTitle">
                </app-turbine-detail-tooltip>
              </div>
            </span>
          </b>
          <b></b>
          <b (mouseenter)="onMouseToopEnter(16)" (mouseleave)="onMouseToopLeave(16)">
            <span class="first-line" *ngIf="isShowGearBox">
              <span class="two-line">
                <div class="system-content detail-flex detail-column ">
                  <app-turbine-detail-tooltip [switchingValue1]='switchingValue1' [switchingValue2]='switchingValue2' fxFlexFill [data]="gearBox"
                    [icon]="gearBoxIcon" [title]="gearBoxTitle">
                  </app-turbine-detail-tooltip>
                </div>
              </span>
            </span>
          </b>
          <b></b>
          <b></b>
          <b (mouseenter)="onMouseToopEnter(1)" (mouseleave)="onMouseToopLeave(1)">
            <span class="first-line" *ngIf="isShowGenerator">
              <span class="two-line">
                <div class="system-content detail-flex detail-column ">
                  <app-turbine-detail-tooltip [switchingValue1]='switchingValue1' [switchingValue2]='switchingValue2' fxFlexFill [data]="generator"
                    [icon]="generatorIcon" [title]="generatorTitle">
                  </app-turbine-detail-tooltip>
                </div>
              </span>
            </span>
          </b>
        </span>

      </header>
      <section class="detail-main-content detail-flex-full detail-flex detail-column">
        <header class="system-tab" >
          <span [ngClass]="{on:n===false}" (click)="onClickHome()">
            <b class="fa fa-home"></b>
            <i>主页</i>
          </span>
          <span #titleShow *ngFor="let item of total;let i=index" [ngClass]="{on:n===i,hide:item.data.length==0}" (click)="onClick(i,item?.img)">
            <b>
              <img *ngIf="item?.img" [src]="localhostPath+'/assets/images/' + item?.img?.icon" alt="">

            </b>
            <i>{{item?.title}}</i>
            <div class="mouseenter-show" [hidden]="n!==i">
              <app-turbine-system-details [switchingValue1]='switchingValue1' [switchingValue2]='switchingValue2' [data]="item?.data" [title]="item?.title"
                [image]="item?.img">
              </app-turbine-system-details>
            </div>
          </span>

        </header>
        <div class="detail-information detail-flex-full detail-flex">
          <section class="basic-information detail-flex detail-column">
            <header>
              基本信息
            </header>
            <section class="basic">
              <div>

                <span *ngFor="let item of basicData;let i=index">
                  <i *ngIf="item?.tagKind==='2'" Class='green' [ngStyle]='{background:item?.value==1?switchingValue1:switchingValue2}'></i>
                  <i [title]="item?.value | number:'1.1-2'" *ngIf="item?.tagKind==='1'">{{item?.value | number:'1.1-2'}}</i>
                  <em [title]="item?.tagName+''+item.tagUnit">{{item?.tagName}}{{item.tagUnit}}</em>
                </span>
              </div>

            </section>
          </section>
          <section class="fault-message detail-flex detail-column">
            <app-alarm-list class="full"></app-alarm-list>

          </section>
          <section class="wind-power detail-flex detail-column">
            <!--  <section class="detail-flex detail-column">
              <header>风功率曲线</header>
              <section class="detail-flex-full">
                <div fxFlexFill echarts (chartInit)="onChartInit($event)" [options]="options">
                </div>
              </section>

            </section> -->
            <section class="detail-flex-full detail-flex detail-column">
              <header>风机状态</header>
              <section class="detail-flex-full scroll-wind-power">
                <table>
                  <thead>
                    <th>信息状态</th>
                    <th>时间</th>
                  </thead>
                  <tbody>
                    <tr *ngFor="let item of turbineStatuses;let i=index">
                      <td>{{item.statusName}}</td>
                      <td>{{item.time | date :"y-MM-dd HH:mm:ss"}}</td>
                    </tr>

                  </tbody>
                </table>
              </section>
            </section>
          </section>
        </div>

      </section>

    </div>
  </section>
</div>